<template>
  <layout-slot className="common-page main-content" class="bg-white">
    <source-slot/>


    <div class="common-item">
      <div class="common-title">
        搜索 : {{ keyword }}
      </div>
      <div class="post-lists">
        <div class="post-lists-body">

          <div class="post-list-item" v-for="(tmp,index) of articleList">
            <div class="post-list-item-container  bg-green">
              <router-link :to="tmp.url">
                <div class="item-label " :class="bgColor[index % bgColor.length]">
                  <div class="item-title">{{ tmp.name }}</div>
                  <div class="item-meta clearfix">
                    <div class="item-meta-ico bg-ico-book"
                         :style="{
                                background: `url(https://rawchen.com/usr/themes/rawchen/images/bg-ico.png) no-repeat`,
                                backgroundSize: `40px auto`,
                                backgroundPosition:`0 -${(index % 10) * 40}px !important`,}">
                    </div>
                    <div class="item-meta-date">{{tmp.date | dateFormat('{y}-{m}-{d}') }}</div>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
          <div v-show="articleList && articleList.length == 0" class="post-list-item">没有找到任何内容哦,请换个别的关键字再试试 0_o</div>
        </div>
      </div>

    </div>


  </layout-slot>
</template>

<script>
  import VueHeader from "./header";
  import VueFooter from "./footer";
  import LayoutSlot from "./slot/layout-slot";
  import {getCategory} from "@/api/category";
  import settings from "@/settings";
  import {getTagArticle} from "@/api/tag";
  import {getArticleList} from "@/api/home";
  import SourceSlot from "@/views/skins/GreenBook/slot/source-slot";

  export default {
    name: "archives",
    components: {SourceSlot, VueHeader, VueFooter, LayoutSlot},
    watch: {
      '$route'(n, o) {
        // console.log(n)
        if (n) {
          this.getCategory()
        }
      }
    },
    data() {
      return {
        statistics: {
          articles: '123+',
          labels: '215+',
          comments: '551+',
          ip: "82860+",
          views: "654813+"
        },
        bgColor: ['bg-green', 'bg-red', 'bg-blue', 'bg-purple', 'bg-orange', 'bg-yellow'],
        articleList: null,

      }
    },
    props: {
      keyword: String,
    },
    methods: {
      /**
       * 取出关键字下的所有文章
       */
      getKeywordArticle() {
        if (this.keyword.trim()) {
          this.$store.commit("setLoading",true)
          getArticleList({cmd: 2, keyword: this.keyword}).then(({data}) => {
            this.articleList = data.data.map((item) => ({
              date: item.articleCreated,
              name: item.articleTitle,
              url: `/article-detail/${item.oId}`
            }))
            this.$store.commit("setLoading",false)
          })
        }
      }
    },
    mounted() {
      this.getKeywordArticle()
    }
  }
</script>

<style lang="scss" scoped>

  fieldset {
    margin: 10px 20px 0px 20px;
    border: .06em dashed #d5d5d5;
    border-radius: 0.3em;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    background-color: #f3f3f3;
  }

  fieldset > legend {
    background-color: #eb5055;
    color: #fff;
    border-radius: .2em;
    padding: .2em .5em;
    font-size: .9em;
  }

  .archives-count {
    width: 100%;
    text-align: center;
    color: #666;
  }

  .archives-count .archives-count-item {
    padding: 0.4em 0 0.6em;
    width: 20%;
    float: left;
    border-radius: 0.3em;
  }


  .archives-count code {
    display: block;
    font-size: 2em;
    color: #707070;
    background: transparent !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .archives-count .archives-count-item:hover {
    background: #e8e8e8;
  }

  @media(max-width: 800px) {
    .archives-count code {
      font-size: 15px;
      text-overflow: clip;
      margin-left: -6px;
      margin-right: -6px;
    }
  }

  @media(max-width: 375px) {
    .archives-count code {
      font-size: 14px;
      text-overflow: clip;
      margin-left: -6px;
      margin-right: -6px;
    }
  }


</style>
